<!DOCTYPE html>
<html lang="en">
<head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

    <title>Title</title>

</head>
<body>
        <div class="row">
            <div class="col-sm-6" id="myChart1" style="height: 250px;width: 50%;"></div>
            <div class="col-sm-6" id="myChart2" style="height: 250px;width: 50%;"></div>
        </div>
        <div class="row">
            <div class="col-sm-6" id="myChart3" style="height: 250px;width: 50%;"></div>
            <div class="col-sm-6" id="myChart4" style="height: 250px;width: 50%"></div>
        </div>
        <script src="../jquery/jquery-3.4.1.min.js"></script>
        <script src="../bootstrap/js/bootstrap.js"></script>
        <script src="../bootstrap-treeview/bootstrap-treeview.min.js"></script>
        <script src="../bootstrap-table/bootstrap-table.min.js"></script>
        <script src="../echarts/echarts.min.js"></script>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            $(document).ready(function () {
                $.ajax({
                    url: "saleList",
                    type: "post",
                    dataType: "json",
                    success: function (result) {
                        // alert(JSON.stringify(result));
                        //[{"s_id":1,"s_bookid":1,"s_sum_count":3,"s_sum_price":271.2,"b_name":"java入门"},{"s_id":2,"s_bookid":2,"s_sum_count":5,"s_sum_price":200,"b_name":"oracle基础"},{"s_id":3,"s_bookid":3,"s_sum_count":1,"s_sum_price":25,"b_name":"软件测试"},{"s_id":6,"s_bookid":4,"s_sum_count":1,"s_sum_price":50,"b_name":"javaweb基础"},{"s_id":7,"s_bookid":5,"s_sum_count":3,"s_sum_price":451.5,"b_name":"SpringBoot基础"},{"s_id":8,"s_bookid":8,"s_sum_count":1,"s_sum_price":35.5,"b_name":"MyBatis基础"}]
                        //数据源是一个二维数据，二维数据的第一个元素是横轴信息
                        //从二个元素开始，是图片要加载的数据
                        var source = [];
                        var source1 = [];
                        source[0] = [];
                        source[0][0] = "test";
                        source[0][1] = "销售量";
                        for (var i = 0; i < result.length; i++) {
                            source[i + 1] = [];
                            source[i + 1][0] = result[i].type;
                            source[i + 1][1] = result[i].num;

                        }
                        source1[0] = [];
                        source1[0][0] = "test";
                        source1[0][1] = "销售量";
                        source1[0][2] = "销售额";
                        for (var i = 0; i < result.length; i++) {
                            source1[i + 1] = [];
                            source1[i + 1][0] = result[i].type;
                            source1[i + 1][1] = result[i].num;
                            source1[i + 1][2] = result[i].money;
                        }
                        initChart1(source);
                        initChart2(source);
                        initChart3(source);
                        initChart4(source1);
                    }
                });


                function initChart1(source) {
                    var myChart1 = echarts.init($("#myChart1").get(0));
                    // alert("source="+source);
                    var option = {
                        legend: {
                            // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                            orient: 'vertical',
                            // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                            x: '450',
                            // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                            y: 'center',
                            itemWidth: 24,   // 设置图例图形的宽
                            itemHeight: 10,  // 设置图例图形的高
                            textStyle: {
                                color: '#666'  // 图例文字颜色
                            },
                            // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
                            itemGap: 10,
                            // backgroundColor: '#eee',  // 设置整个图例区域背景颜色

                        },

                        title: {
                            text: '销售量'
                        },
                        tooltip: {show: false},
                        dataset: {
                            // 提供一份数据。
                            source: source
                        },
                        // color: ['#ff0000', '#ffff00', '#00ffff', '#ff00ff', '#00ff00', '#0000ff'],
                        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                        //饼图不用设x轴和y轴
                        // xAxis: {type: 'category'},
                        // 声明一个 Y 轴，数值轴。
                        // yAxis: {},
                        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                        series: [

                            {type: 'pie'}
                        ]
                    }

                    // 使用刚指定的配置项和数据显示图表。
                    myChart1.setOption(option);
                }


                function initChart2(source) {
                    var myChart2 = echarts.init($("#myChart2").get(0));
                    // alert("source="+source);
                    var option = {
                        //legend为空，会自动从数据源的第一行读取标志信息
                        legend: {},
                        title: {
                            text: '销售量'
                        },
                        tooltip: {},
                        dataset: {
                            // 提供一份数据。
                            source: source
                        },
                        // dataset: {
                        //     source: [
                        //         ['product', '2015', '2016', '2017'],
                        //         ['Matcha Latte', 43.3, 85.8, 93.7],
                        //         ['Milk Tea', 83.1, 73.4, 55.1],
                        //         ['Cheese Cocoa', 86.4, 65.2, 82.5],
                        //         ['Walnut Brownie', 72.4, 53.9, 39.1]
                        //     ]
                        // },

                        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                        title: {
                            text: '销量示意图'
                        },
                        // itemStyle: {
                        //     // 阴影的大小
                        //     shadowBlur: 60,
                        //     // 阴影水平方向上的偏移
                        //     shadowOffsetX: 0,
                        //     // 阴影垂直方向上的偏移
                        //     shadowOffsetY: 0,
                        //     // 阴影颜色
                        //     shadowColor: 'rgba(0, 0, 0, 0.1)'
                        // },
                        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                        xAxis: {type: 'category'},
                        // 声明一个 Y 轴，数值轴。
                        yAxis: {},
                        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                        series: [
                            {type: 'bar'},
                        ]
                    }

                    // 使用刚指定的配置项和数据显示图表。
                    myChart2.setOption(option);
                }

                function initChart3(source) {
                    var myChart3 = echarts.init($("#myChart3").get(0));
                    // alert("source="+source);
                    var option = {
                        legend: {},
                        title: {
                            text: '销售量'
                        },
                        tooltip: {},
                        dataset: {
                            // 提供一份数据。
                            source: source
                        },
                        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                        xAxis: {type: 'category'},
                        // 声明一个 Y 轴，数值轴。
                        yAxis: {},
                        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                        series: [
                            {type: 'line'}
                        ]
                    }

                    // 使用刚指定的配置项和数据显示图表。
                    myChart3.setOption(option);
                }

                function initChart4(source) {
                    var myChart4 = echarts.init($("#myChart4").get(0));
                    // alert("source="+source);
                    var option = {
                        title: {
                            text: '销售额'
                        },
                        legend: {},
                        tooltip: {},
                        dataset: {
                            // 提供一份数据。
                            source: source
                        },
                        // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
                        xAxis: {type: 'category'},
                        // 声明一个 Y 轴，数值轴。
                        yAxis: {},
                        // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
                        series: [
                            {type: 'line'},
                            {type: 'line'}
                        ]
                    }

                    // 使用刚指定的配置项和数据显示图表。
                    myChart4.setOption(option);
                }
            })


        </script>














</body>
</html>